<template>
  <div class="my-promotion">
    <div class="promotion-card">
      <!-- 返回按钮 -->
      <div class="back-button" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>

      <h2 class="section-title">我的推广</h2>

      <!-- 数据概览卡片 -->
      <el-row :gutter="20" class="stats-cards">
        <el-col :span="8" v-for="(stat, index) in stats" :key="index">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-icon" :style="{ background: stat.iconBg }">
              <i :class="stat.icon"></i>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
              <!-- 修改提现按钮位置 -->
              <el-button 
                v-if="index === 2" 
                type="primary" 
                size="mini" 
                class="withdraw-btn"
                @click="showWithdrawDialog"
              >
                提现
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 推广链接区域 -->
      <el-card class="promotion-link-section" shadow="never">
        <div slot="header">
          <span class="card-title">专属推广链接</span>
          <el-button
            type="primary"
            size="small"
            @click="copyLink"
            style="background: #3f5d62; border-color: #3f5d62; margin-left: 10px;"
          >
            复制链接
          </el-button>
        </div>
        <el-input v-model="promotionLink" readonly>
          <template slot="append">
            <i class="el-icon-document-copy"></i>
          </template>
        </el-input>
        <div class="qr-code">
          <img :src="qrCodeUrl" alt="推广二维码" />
          <span>扫码分享</span>
        </div>
      </el-card>

      <!-- 推广记录表格 -->
      <div class="promotion-records">
        <h3>推广记录</h3>
        <el-table
          :data="displayedRecords"
          style="width: 100%"
          :header-cell-style="{ background: '#F5F7FA', color: '#3F5D62' }"
        >
          <el-table-column
            prop="date"
            label="时间"
            width="180"
          ></el-table-column>
          <el-table-column prop="user" label="用户"></el-table-column>
          <el-table-column prop="product" label="购买产品"></el-table-column>
          <el-table-column prop="amount" label="订单金额" width="120">
            <template slot-scope="scope">
              <span style="color: #3f5d62">￥{{ scope.row.amount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="commission" label="佣金" width="120">
            <template slot-scope="scope">
              <span style="color: #f56c6c">￥{{ scope.row.commission }}</span>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 展开更多按钮 -->
        <div class="expand-more" v-if="records.length > 10">
          <el-button 
            type="text" 
            @click="expandRecords" 
            class="expand-btn"
          >
            {{ isExpanded ? '收起' : '展开更多' }}
            <i :class="isExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </el-button>
        </div>
      </div>

      <!-- 温馨提示 -->
      <div class="service-notice">
        <div class="notice-content">
          <i class="el-icon-warning-outline"></i>
          <span>佣金将在订单完成后7天内自动结算，可随时提现。</span>
        </div>
      </div>
    </div>
    
    <!-- 提现对话框 -->
    <el-dialog
      title="佣金提现"
      :visible.sync="withdrawDialogVisible"
      width="400px"
      center
    >
      <div class="withdraw-dialog-content">
        <div class="available-amount">
          <span>可提现金额</span>
          <span class="amount">{{ stats[2].value }}</span>
        </div>
        
        <el-form :model="withdrawForm" label-width="80px">
          <el-form-item label="提现金额">
            <el-input 
              v-model="withdrawForm.amount" 
              placeholder="请输入提现金额"
              type="number"
            >
              <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="提现方式">
            <el-radio-group v-model="withdrawForm.method">
              <el-radio label="wechat">微信</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="账号">
            <el-input 
              v-model="withdrawForm.account" 
              placeholder="请输入收款账号"
            ></el-input>
          </el-form-item>
        </el-form>
        
        <div class="withdraw-notice">
          <i class="el-icon-info"></i>
          <span>提现申请将在1-3个工作日内处理</span>
        </div>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitWithdraw" style="background: #3f5d62; border-color: #3f5d62;">
          确认提现
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "MyPromotionView",
  data() {
    return {
      stats: [
        {
          icon: "el-icon-user",
          iconBg: "#E6F7FF",
          value: "128",
          label: "累计邀请",
        },
        {
          icon: "el-icon-money",
          iconBg: "#F6FFED",
          value: "￥3,680",
          label: "累计收益",
        },
        {
          icon: "el-icon-wallet",
          iconBg: "#FFF7E6",
          value: "￥680",
          label: "可提现金额",
        },
      ],
      promotionLink: "https://example.com/invite/USER123",
      qrCodeUrl: require("@/assets/info/temp.png"),
      records: [
        {
          date: "2024-03-15 14:30",
          user: "用户***789",
          product: "ChatGPT Plus",
          amount: "199.00",
          commission: "19.90",
        },
        {
          date: "2024-03-14 16:20",
          user: "用户***456",
          product: "Midjourney会员",
          amount: "299.00",
          commission: "29.90",
        },
        {
          date: "2024-03-13 09:15",
          user: "用户***123",
          product: "AI绘画课程",
          amount: "399.00",
          commission: "39.90",
        },
        {
          date: "2024-03-12 18:45",
          user: "用户***234",
          product: "ChatGPT Plus",
          amount: "199.00",
          commission: "19.90",
        },
        {
          date: "2024-03-11 11:30",
          user: "用户***567",
          product: "Midjourney会员",
          amount: "299.00",
          commission: "29.90",
        },
        {
          date: "2024-03-10 15:20",
          user: "用户***890",
          product: "AI写作助手",
          amount: "159.00",
          commission: "15.90",
        },
        {
          date: "2024-03-09 10:10",
          user: "用户***345",
          product: "ChatGPT Plus",
          amount: "199.00",
          commission: "19.90",
        },
        {
          date: "2024-03-08 14:25",
          user: "用户***678",
          product: "AI绘画课程",
          amount: "399.00",
          commission: "39.90",
        },
        {
          date: "2024-03-07 16:40",
          user: "用户***901",
          product: "Midjourney会员",
          amount: "299.00",
          commission: "29.90",
        },
        {
          date: "2024-03-06 09:30",
          user: "用户***234",
          product: "AI写作助手",
          amount: "159.00",
          commission: "15.90",
        },
        {
          date: "2024-03-05 13:15",
          user: "用户***567",
          product: "ChatGPT Plus",
          amount: "199.00",
          commission: "19.90",
        },
        {
          date: "2024-03-04 17:50",
          user: "用户***890",
          product: "AI绘画课程",
          amount: "399.00",
          commission: "39.90",
        },
      ],
      isExpanded: false,
      withdrawDialogVisible: false,
      withdrawForm: {
        amount: '',
        method: 'alipay',
        account: ''
      }
    };
  },
  computed: {
    displayedRecords() {
      return this.isExpanded ? this.records : this.records.slice(0, 10);
    }
  },
  methods: {
    copyLink() {
      navigator.clipboard.writeText(this.promotionLink);
      this.$message({
        message: "链接已复制到剪贴板",
        type: "success",
      });
    },
    expandRecords() {
      this.isExpanded = !this.isExpanded;
    },
    showWithdrawDialog() {
      // 默认填入全部可提现金额
      this.withdrawForm.amount = this.stats[2].value.replace('￥', '');
      this.withdrawDialogVisible = true;
    },
    submitWithdraw() {
      // 这里添加提现逻辑
      this.$message({
        message: "提现申请已提交，请等待处理",
        type: "success",
      });
      this.withdrawDialogVisible = false;
    }
  },
};
</script>

<style scoped>
.my-promotion {
  min-height: 50vh;
  padding: 40px 20px;
  background: #f8f9fa;
  display: flex;
  justify-content: center;
}

.promotion-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 30px;
  width: 100%;
  max-width: 1060px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.back-button {
  position: absolute;
  left: 30px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #3f5d62;
  cursor: pointer;
  font-size: 1rem;
}

.back-button:hover {
  opacity: 0.8;
}

.section-title {
  font-size: 2rem;
  color: #3f5d62;
  margin: 20px 0 40px;
  text-align: center;
}

.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.stat-icon i {
  font-size: 24px;
  color: #3f5d62;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #3f5d62;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

/* 修改提现按钮样式 - 调整位置到可提现金额右侧 */
.withdraw-btn {
  position: absolute;
  top: 80%;
  margin-left: 250px;
  transform: translateY(-50%);
  background: #3f5d62;
  border-color: #3f5d62;
  padding: 5px 10px;
  font-size: 12px;
}

/* 调整可提现金额卡片内部布局，为按钮留出空间 */
.stat-card:nth-child(3) .stat-info {
  padding-right: 60px;
}

.promotion-link-section {
  margin-bottom: 30px;
  border-radius: 12px;
}

.card-title {
  font-size: 1.1rem;
  color: #3f5d62;
  font-weight: bold;
}

.qr-code {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qr-code img {
  width: 120px;
  height: 120px;
}

.qr-code span {
  color: #666;
  font-size: 0.9rem;
}

.promotion-records {
  margin-bottom: 30px;
}

.promotion-records h3 {
  color: #3f5d62;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

/* 展开更多按钮样式 */
.expand-more {
  text-align: center;
  margin-top: 15px;
}

.expand-btn {
  color: #3f5d62;
  font-size: 0.9rem;
}

.expand-btn i {
  margin-left: 5px;
}

.service-notice {
  padding: 20px 25px;
  background: linear-gradient(to right, #fff9e6, #fff5d6);
  border-radius: 12px;
  border: 1px solid rgba(230, 162, 60, 0.15);
}

.notice-content {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 0.95rem;
}

.notice-content i {
  color: #e6a23c;
  font-size: 1.4rem;
}

/* 提现对话框样式 */
.withdraw-dialog-content {
  padding: 0 20px;
}

.available-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;
}

.available-amount .amount {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f56c6c;
}

.withdraw-notice {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 4px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #666;
}

.withdraw-notice i {
  color: #3f5d62;
}

@media (max-width: 768px) {
  .section-title {
    margin-top: 40px;
  }

  .stats-cards {
    margin-bottom: 20px;
  }

  .stat-card {
    margin-bottom: 15px;
  }
}
</style> 